<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    template="../templates/ui.xhtml">
    
	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">TreeTable - ContextMenu</h1>

		<div class="entry">
			<p>TreeTable has special integration with ContextMenu.</p>
			
			<h:form id="form">
                
                <p:contextMenu id="contextMenuId" for="docs">
                    <p:menuitem value="View" update="documentPanel" icon="ui-icon-search" oncomplete="documentDialog.show()"/>
                    <p:menuitem value="Delete" actionListener="#{documentsController.deleteNode}" update="docs" icon="ui-icon-close"/>
				</p:contextMenu>

                <p:treeTable value="#{documentsController.root}" var="document" id="docs" 
                             selectionMode="single" selection="#{documentsController.selectedNode}">
                    
                    <f:facet name="header">
                        Right-Click to See Options
                    </f:facet>
					
                    <p:column style="width:150px">
						<f:facet name="header">
							Name
						</f:facet>
						<h:outputText value="#{document.name}" />
					</p:column>
					
					<p:column style="width:100px">
						<f:facet name="header">
							Size
						</f:facet>
						<h:outputText value="#{document.size}" />
					</p:column>
					
					<p:column style="width:100px">
						<f:facet name="header">
							Type
						</f:facet>
						<h:outputText value="#{document.type}" />
					</p:column>
				</p:treeTable>
                
                <p:dialog id="dialog" header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true">
					<p:outputPanel id="documentPanel">
                        <h:panelGrid  columns="2" cellpadding="5" rendered="#{not empty documentsController.selectedNode}">
							<h:outputLabel for="name" value="Name: " />
							<h:outputText id="name" value="#{documentsController.selectedNode.data.name}" style="font-weight:bold" />
							
							<h:outputLabel for="size" value="Size: " />
							<h:outputText id="size" value="#{documentsController.selectedNode.data.size}" style="font-weight:bold" />
							
							<h:outputLabel for="type" value="Type " />
							<h:outputText id="type" value="#{documentsController.selectedNode.data.type}" style="font-weight:bold" />
						</h:panelGrid>
					</p:outputPanel>
				</p:dialog>
				
			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="treeTableContextMenu.xhtml">
					<pre name="code" class="xml">
&lt;h:form id="form"&gt;
                
    &lt;p:contextMenu for="docs"&gt;
        &lt;p:menuitem value="View" update="documentPanel" icon="ui-icon-search" oncomplete="documentDialog.show()"/&gt;
        &lt;p:menuitem value="Delete" actionListener="\#{documentsController.deleteNode}" update="docs" icon="ui-icon-close"/&gt;
    &lt;/p:contextMenu&gt;

    &lt;p:treeTable value="\#{documentsController.root}" var="document" id="docs" 
                 selectionMode="single" selection="\#{documentsController.selectedNode}"&gt;

        &lt;f:facet name="header"&gt;
            Right-Click to See Options
        &lt;/f:facet&gt;

        &lt;p:column style="width:150px"&gt;
            &lt;f:facet name="header"&gt;
                Name
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.name}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column style="width:100px"&gt;
            &lt;f:facet name="header"&gt;
                Size
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.size}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column style="width:100px"&gt;
            &lt;f:facet name="header"&gt;
                Type
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{document.type}" /&gt;
        &lt;/p:column&gt;
    &lt;/p:treeTable&gt;

    &lt;p:dialog header="Document Detail" showEffect="fade" widgetVar="documentDialog" modal="true"&gt;
        &lt;p:outputPanel id="documentPanel"&gt;
            &lt;h:panelGrid  columns="2" cellpadding="5" rendered="\#{not empty documentsController.selectedNode}"&gt;
                &lt;h:outputLabel for="name" value="Name: " /&gt;
                &lt;h:outputText id="name" value="\#{documentsController.selectedNode.data.name}" style="font-weight:bold" /&gt;

                &lt;h:outputLabel for="size" value="Size: " /&gt;
                &lt;h:outputText id="size" value="\#{documentsController.selectedNode.data.size}" style="font-weight:bold" /&gt;

                &lt;h:outputLabel for="type" value="Type " /&gt;
                &lt;h:outputText id="type" value="\#{documentsController.selectedNode.data.type}" style="font-weight:bold" /&gt;
            &lt;/h:panelGrid&gt;
        &lt;/p:outputPanel&gt;
    &lt;/p:dialog&gt;

&lt;/h:form&gt;
					</pre> 
				</p:tab>
				
				<p:tab title="DocumentsController.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import org.primefaces.examples.domain.Document;

public class DocumentsController implements Serializable {
	
	private TreeNode root;

    private TreeNode selectedNode;
	
	public DocumentsController() {
		root = new DefaultTreeNode("root", null);
		
		TreeNode documents = new DefaultTreeNode(new Document("Documents", "-", "Folder"), root);
		TreeNode pictures = new DefaultTreeNode(new Document("Pictures", "-", "Folder"), root);
		TreeNode music = new DefaultTreeNode(new Document("Music", "-", "Folder"), root);
		
		TreeNode work = new DefaultTreeNode(new Document("Work", "-", "Folder"), documents);
		TreeNode primefaces = new DefaultTreeNode(new Document("PrimeFaces", "-", "Folder"), documents);
		
		//Documents
		TreeNode expenses = new DefaultTreeNode("document", new Document("Expenses.doc", "30 KB", "Word Document"), work);
		TreeNode resume = new DefaultTreeNode("document", new Document("Resume.doc", "10 KB", "Word Document"), work);
		TreeNode refdoc = new DefaultTreeNode("document", new Document("RefDoc.pages", "40 KB", "Pages Document"), primefaces);
		
		//Pictures
		TreeNode barca = new DefaultTreeNode("picture", new Document("barcelona.jpg", "30 KB", "JPEG Image"), pictures);
		TreeNode primelogo = new DefaultTreeNode("picture", new Document("logo.jpg", "45 KB", "JPEG Image"), pictures);
		TreeNode optimus = new DefaultTreeNode("picture", new Document("optimusprime.png", "96 KB", "PNG Image"), pictures);
		
		//Music
		TreeNode turkish = new DefaultTreeNode(new Document("Turkish", "-", "Folder"), music);
		
		TreeNode cemKaraca = new DefaultTreeNode(new Document("Cem Karaca", "-", "Folder"), turkish);
		TreeNode erkinKoray = new DefaultTreeNode(new Document("Erkin Koray", "-", "Folder"), turkish);
		TreeNode mogollar = new DefaultTreeNode(new Document("Mogollar", "-", "Folder"), turkish);
		
		TreeNode nemalacak = new DefaultTreeNode("mp3", new Document("Nem Alacak Felek Benim", "1500 KB", "Audio File"), cemKaraca);
		TreeNode resimdeki = new DefaultTreeNode("mp3", new Document("Resimdeki Gozyaslari", "2400 KB", "Audio File"), cemKaraca);
		
		TreeNode copculer = new DefaultTreeNode("mp3", new Document("Copculer", "2351 KB", "Audio File"), erkinKoray);
		TreeNode oylebirgecer = new DefaultTreeNode("mp3", new Document("Oyle bir Gecer", "1794 KB", "Audio File"), erkinKoray);
		
		TreeNode toprakana = new DefaultTreeNode("mp3", new Document("Toprak Ana", "1536 KB", "Audio File"), mogollar);
		TreeNode bisiyapmali = new DefaultTreeNode("mp3", new Document("Bisi Yapmali", "2730 KB", "Audio File"), mogollar);
	}
	
	public TreeNode getRoot() {
		return root;
	}

    public TreeNode getSelectedNode() {
        return selectedNode;
    }

    public void setSelectedNode(TreeNode selectedNode) {
        this.selectedNode = selectedNode;
    }

    public void deleteNode() {
        selectedNode.getChildren().clear();
        selectedNode.getParent().getChildren().remove(selectedNode);
        selectedNode.setParent(null);
        
        selectedNode = null;
    }
}
					</pre>
				</p:tab>
			</p:tabView>
		</div>

	</ui:define>
</ui:composition>